<template>
  <div class="bg_view">
    <!-- <user-card :islogin="true" :isbind="true"></user-card> -->

    <div class="cus_select" @click="dmsfun">
      <img
        src="@/assets/img/calendar@2x.png"
        alt=""
        style="width: 1.0625rem; height: 0.9375rem; margin-right: 0.3125rem"
      />
      <div>{{ value }}</div>
      <img
        src="@/assets/img/drop.png"
        alt=""
        style="width: 0.6875rem; height: 0.4375rem"
      />
    </div>
    <template v-if="noData">
      <div class="noresult">
        <img src="@/assets/img/img_no results@2x.png" alt="" />
        <div>无数据</div>
      </div>
    </template>
    <template v-else>
      <div class="reportBox">
        <div
          class="report_item"
          v-for="(item, index) in copyList"
          @click="goCopyDeatails(item)"
        >
          <img src="@/assets/img/right.png" alt="" class="bill_box_img" />
          <div class="report_item_1">
            <div><span>患者姓名：</span>{{ item.patientName }}</div>
          </div>
          <div class="report_item_1">
            <div><span>就诊科室：</span>{{ item.patientDept }}</div>
          </div>
          <div class="report_item_1">
            <div><span>就诊医生：</span>{{ item.patientDoctor }}</div>
          </div>
          <div class="report_item_1">
            <div><span>出院时间：</span>{{ item.patientOutDate }}</div>
          </div>
          <div class="report_item_1">
            <div><span>申请时间：</span>{{ item.createTime }}</div>
          </div>
          <div class="report_item_status">
            <span v-if="item.status == -1" style="color: #949fb4">
              已取消
            </span>
            <span v-if="item.status == 0" style="color: #f72d23"> 待支付 </span>
            <span v-if="item.status == 1" style="color: #f72d23"> 审核中 </span>
            <span v-if="item.status == 2" style="color: #949fb4"> 待发货 </span>
            <span
              v-if="item.status == 3 || item.status == 4"
              style="color: #f72d23"
            >
              审核驳回
            </span>
            <span
              v-if="item.status == 7 || item.status == 5"
              style="color: #39ad1a"
            >
              已发货
            </span>
            <span v-if="item.status == 10" style="color: #f72d23">
              已完成
            </span>
          </div>
        </div>
      </div>
    </template>
    <div class="date_mask" v-if="dateMaskShow">
      <div class="date_mask_ul">
        <div
          class="date_mask_li"
          v-for="(date, index) in datelist"
          @click="dateClick($event, date)"
          :style="{ color: date.selected == true ? '#448EFF' : '#3F4551' }"
          :data-idx="index"
        >
          {{ date.name }}
        </div>
        <div class="date_mask_li" @click="dmsfun">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
import userCard from "@/components/userCard.vue";
import { Tab, TabItem } from "vux";
import { recordCopyList } from "@/api/api";

export default {
  components: {
    userCard,
    Tab,
    TabItem,
  },
  data() {
    return {
      noData: true,
      tabItemShow: "0",
      dateMaskShow: false,
      value: "一周内",
      y: "",
      m: "",
      d: "",
      userInfo: {},
      datelist: [
        { value: 0, name: "一周内", selected: false },
        { value: 0, name: "一月内", selected: false },
        { value: 0, name: "三月内", selected: false },
        { value: 0, name: "一年内", selected: false },
        { value: 0, name: "更早", selected: false },
      ],
      EndDate: "",
      BeginDate: "",
      copyList: [],
    };
  },
  created() {
    if (window.localStorage.getItem("cardInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("cardInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultCardInfo")
      );
    }
    console.log(this.userInfo);
    this.recordCopyList();
  },
  methods: {
    recordCopyList(date) {
      var data = {
        page: 1, //分页页码，数字类型
        size: 100,
      };
      recordCopyList(data).then((res) => {
        if (res.code == 200) {
          this.copyList = res.data;

          if (this.copyList.length > 0) {
            this.noData = false;
          }
        }
      });
    },
    dmsfun() {
      this.dateMaskShow = !this.dateMaskShow;
    },
    dateClick(e, date) {
      console.log(e.currentTarget.dataset.idx);
      var idx = e.currentTarget.dataset.idx;
      this.dmsfun();
      this.value = date.name;
      this.datelist.forEach((element) => {
        element.selected = false;
      });
      this.datelist[idx].selected = true;
      this.changeDay(date.name);
    },
    getToday() {
      var today = new Date();
      var yy = today.getFullYear();
      var mm = today.getMonth() + 1;
      var dd = today.getDate();
      this.BeginDate =
        yy + "-" + (mm < 10 ? "0" + mm : mm) + "-" + (dd < 10 ? "0" + dd : dd);
      //
      var nowdate = new Date();
      var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
      this.y = oneweekdate.getFullYear();
      this.m = oneweekdate.getMonth() + 1;
      this.d = oneweekdate.getDate();
      this.EndDate =
        this.y +
        "-" +
        (this.m < 10 ? "0" + this.m : this.m) +
        "-" +
        (this.d < 10 ? "0" + this.d : this.d);
    },
    changeDay(name) {
      console.log(name);
      var nowdate = new Date();
      if (name == "一周内") {
        var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
        this.y = oneweekdate.getFullYear();
        this.m = oneweekdate.getMonth() + 1;
        this.d = oneweekdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "一月内") {
        nowdate.setMonth(nowdate.getMonth() - 1);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "三月内") {
        nowdate.setMonth(nowdate.getMonth() - 3);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "一年内") {
        nowdate.setMonth(nowdate.getMonth() - 12);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "更早") {
        this.EndDate = "";
      }
      this.recordCopyList(this.EndDate);
    },
    goCopyDeatails(item) {
      this.$router.push({
        path: "/medical_record_copy_details",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>
<style scoped>
.tab_box {
  width: calc(100% - 2rem);
  padding: 0 1rem;
}

.cus_select {
  padding: 0px 1rem;
  background-color: #f7fafd;
  width: calc(100% - 2rem);
  height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

.cus_select img {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}

.cus_select div {
  width: calc(100% - 2.75rem);
  background-color: #f7fafd;
}

.date_mask {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.date_mask_ul {
  position: fixed;
  bottom: 0px;
  left: 0px;
  /* height: 18.75rem; */
  width: 100%;
  background-color: #ffffff;
}

.date_mask_li {
  width: 100%;
  height: 3.125rem;
  border-bottom: 0.0625rem solid #eee;
  line-height: 50px;
  text-align: center;
  font-size: 0.9375rem;
  color: #3f4551;
}

.date_mask_li:last-of-type {
  background-color: #f1f5f9;
}

.reportBox {
  height: calc(100vh - 2.75rem);
  overflow-y: scroll;
}

.report_item {
  padding: 1rem;
  margin: 0.75rem 1rem;
  width: calc(100% - 4rem);
  /* border-bottom: 0.0625rem solid #e7ecf5; */
  background-color: #fff;
  position: relative;
  border-radius: 0.375rem;
}

.report_item .report_item_1 {
  font-size: 0.9375rem;
  line-height: 1.875rem;
}

.report_item .report_item_1 span {
  color: #949fb4;
}

.report_item_status {
  position: absolute;
  right: 1rem;
  top: 1.2rem;
  font-size: 0.875em;
}

.noresult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 31.25rem;
}

.noresult img {
  display: block;
  width: 12.5rem;
  height: 9.75rem;
}

.bill_box_img {
  width: 0.5rem;
  height: 0.8125rem;
  position: absolute;
  top: calc((100% - 0.8125rem) / 2);
  right: 1rem;
}
</style>
